<template>
  <div>
    <div class="inputWraper">
      <!-- 3.直接使用 -->
      <!-- class 赋值一个对象 以 key:value 配对 css类名:布尔值 -->
      <input
        :type="type"
        :placeholder="placeholder"
        v-model="inputVal"
        @blur="checkValid"
        :class="{
          success:isValid,
          error:!isValid
      }"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: "",
      isValid: true,
    };
  },
  // 父传子
  // 2.子组件声明接收
  props: ["type", "placeholder", "rule", "err_message"],

  //   监听校验
  watch: {
    inputVal(newVal) {
      // 利用正则

      if (this.rule.test(newVal)) {
        //   根据是否合法的状态,给 input 带上不同的 class
        // 需要将是否合法存在 data
        this.isValid = true;
        // console.log("合法");
      } else {
        this.isValid = false;
        // console.log(this.err_message);
      }
      //   每次修改数据,通知父组件,随时登录操作
      this.$emit("valChange", newVal);
    },
  },
  methods: {
    checkValid() {
      // 每当失去焦点是弹出提示
      if (!this.isValid) {
        // alert(this.err_message);
        // this.$toast(this.err_message);
        this.$toast.fail(this.err_message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.inputWraper {
  input {
    width: 100%;
    border: none;
    outline: none;
    border-bottom: 1px solid #888;
    font-size: 18/360 * 100vw;
    line-height: 50/360 * 100vw;
    background-image: linear-gradient(
      90deg,
      rgba(0, 106, 255, 0.925),
      rgba(255, 0, 255, 0.647)
    );
  }
  .error {
    border-color: red;
  }
}
</style>